import { useState, useEffect } from 'react';
import { Popover } from 'antd';
import moment from 'moment';
import CommonPagination from '@/components/CommonPagination';
import TableRender from '@/components/TableRender';
import RefuseModal from './RefuseModal';
import { queryGoodsList, getUserAccountListOp } from '../service';
import { useNavigate } from 'react-router-dom';

//状态字典
const statusMap = {
  0: '审核中',
  1: '已通过',
  2: '已拒绝',
};

const TableList = ({ query, tableKey, headerHeight }) => {
  const [data, setData] = useState([]); //表格数据
  const [visible, setVisible] = useState(false); //审核拒绝原因弹窗
  const [recordData, setRecordData] = useState({}); //单行的数据

  const navigate = useNavigate();
  const [pagination, setPagination] = useState({
    current: 1,
    total: 0,
    pageSize: 100,
    showQuickJumper: true,
    pageSizeOptions: [10, 20, 50, 100, 500],
  }); //分页数据

  const columns = [
    {
      title: '序号',
      code: 'index',
      lock: true,
      width: 60,
      render: (t, r, i) => i + 1,
    },
    {
      title: '支付宝订单号',
      code: 'alipayOrderSn',
      width: 150,
    },
    {
      title: '充值金额',
      code: 'amount',
      width: 140,
    },
    {
      title: '实际充值金额',
      code: 'realAmount',
      width: 140,
    },
    {
      title: '申请时间',
      code: 'applyTime',
      width: 150,
    },
    {
      title: '审核时间',
      code: 'checkTime',
      width: 150,
    },
    {
      title: '账单详情截图',
      code: 'imgUrl',
      width: 200,
      render: (text, record) => (
        <Popover
          trigger="click"
          content={
            <div style={{ width: '300px', height: '200px' }}>
              <img style={{ width: '100%', height: '100%' }} src={text} />
            </div>
          }
        >
          <div style={{ width: '150px', height: '100px' }}>
            <img style={{ width: '100%', height: '100%' }} src={text} />
          </div>
        </Popover>
      ),
    },
    {
      title: '充值支付宝账号',
      code: 'alipayAccountNo',
      width: 180,
    },
    {
      title: '状态',
      code: 'status',
      width: 180,
      render: (text) => <span>{statusMap[text]}</span>,
    },
    {
      title: '操作',
      code: 'key',
      width: 180,
      render: (t, r, i) => {
        if (r.status == 2) {
          return (
            <span className="opera-span-common">
              <a onClick={() => handleViewRemark(r)}>查看原因</a>
            </span>
          );
        } else if (r.status == 1) {
          return (
            <span className="opera-span-common">
              <a onClick={() => handleViewOrder(r)}>查看业务订单号</a>
            </span>
          );
        }
      },
    },
  ];

  useEffect(() => {
    if (tableKey) {
      getTableList(query, {
        ...pagination,
        current: 1,
      });
    }
  }, [tableKey]);

  //获取线下支付列表
  const getTableList = async (query, pagination) => {
    START_LOADING();
    const params = {
      ...query,
      size: pagination.pageSize,
      current: pagination.current,
    };
    if (params.time) {
      params.applyTimeStart = moment(params.time[0]).format(
        'YYYY-MM-DD HH:mm:ss'
      );
      params.applyTimeEnd = moment(params.time[1]).format(
        'YYYY-MM-DD HH:mm:ss'
      );
    }
    params.time = undefined;
    const { success, data } = await queryGoodsList(params);
    if (success) {
      const { records = [], total } = data;
      setData(records);
      pagination.total = total;
      setPagination(pagination);
    }
    END_LOADING();
  };

  //点击查看原因
  const handleViewRemark = (record) => {
    setRecordData(record);
    setVisible(true);
  };

  //查看业务单号
  const handleViewOrder = async (record) => {
    START_LOADING();
    const { success, data = {} } = await getUserAccountListOp({
      payOrderSn: record?.payOrderSn,
      size: 100,
      current: 1,
    });
    const { records = [] } = data;
    let jumpPayOrder = '';
    if (success) {
      if (records.length > 0) {
        jumpPayOrder = records[0].tradeNo;
      }
    }
    navigate(
      `/account/balance?payOrder=${jumpPayOrder}`
    );
    END_LOADING();
  };
  //表格组件
  const TableRenderProps = {
    data,
    columns,
    rowKey: 'id',
    style: {
      height: `calc(100vh - ${headerHeight + 180}px)`
    },
    pageConfig: {
      showPage: false,
    }
  }

  //分页区
  const pageProps = {
    pagination,
    style: {
      marginTop: '12px'
    },
    handleChange(current, size) {
      setPagination({
        ...pagination,
        current: current,
        pageSize: size,
      });
      getTableList(query, { ...pagination, current, pageSize: size });
    },
  };

  //审核拒绝
  const RefuseModalProps = {
    visible,
    handleCancel() {
      setVisible(false);
      setRecordData({});
    },
    recordData,
  };

  return (
    <>
      <TableRender {...TableRenderProps} />
      <CommonPagination {...pageProps} />
      <RefuseModal {...RefuseModalProps} />
    </>
  );
};

export default TableList;
